<template>
  <div class="dashboard-content" style="position:absolute;width:100%;">
    <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
      <div class="card-box clearfix" style="height:100%;">
        <div slot="header" class="clearfix card-title">
          <span>{{content.name}}</span>
          <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <template>         
          <div class="tabs-content-box" style="width: 34%; height: 100%;float:left;">
            <!--<div id="chart" :style="{width: '100%', height: '100%'}" auto-resize></div>-->
            <v-chart :options="barOption" :style="{width: '100%', height: '250px'}" :autoresize="true"> </v-chart>
          </div>
          <div class="tabs-content-box" style="width: 64%; height: 100%;float:right;">
            <template>
              <div class="info bgZc" >
                <div class="part-1 marB"><span>合同总数:</span><span class="specific">{{purchaseList.contractTotal}}</span><span class="rate">{{purchaseList.contractNum}}</span></div>
                <div class="part-1 dispalyInline"><span>政府采购:</span><span class="specific">{{purchaseList.purchaseZf}}</span><span class="rate">{{purchaseList.purchaseZfNum}}</span></div>
                <div class="part-1 dispalyInline"><span>非政府采购:</span><span class="specific">{{purchaseList.purchaseZfF}}</span><span class="rate">{{purchaseList.purchaseZfFNum}}</span></div>
              </div>
              <div class="tableTitle">{{tableTitle}}</div>
              <el-table
                :data="contractList"
                :header-cell-style="headStyle"
                :cell-style="tableStyle"
                border
                stripe
                size ="small"
                style="width: 100%">
                <el-table-column
                  prop="contractNo"
                  label="合同编号">
                </el-table-column>
                <el-table-column
                  prop="paymentTime"
                  label="付款时间">
                </el-table-column>
              </el-table>
              <div>
                <div class="infoList">
                  <span>终止合同</span><el-link class="contractLink" :underline="false" v-for="(item,index) in terminationList" :key="index">{{item}}</el-link>
                </div>
                <div class="infoList">
                  <span>变更合同</span><el-link class="contractLink" :underline="false" v-for="(item,index) in changeList" :key="index">{{item}}</el-link>
                </div>
              </div>
            </template>
          </div>              
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
//let echarts = require('echarts/lib/echarts');
import ECharts from '~/static/js/vue-echarts';
import { contractExecution } from './data/Content.js';
//import option from '/portal/data/ChartsData.json';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'ContractExecution',
    props: ['content'],
    data(){
        return {
            barOption: {},
            contractList: [],
            tableTitle:'',
            purchaseList:[],
            contractNumList:[],
            terminationList:[],
            changeList:[],
            headStyle: {'background':'#eee','color':'#333','borderColor':'#ddd','fontWeight': '500'},
            tableStyle: {
                'color':'#333','fontWeight': '400'
            }
        };
    },
    components: {
        'v-chart': ECharts
    },
    created:function (){
        this.getContractList();
    },
    methods: {
        getContractList(){
            this.$axios.get(contractExecution.url2)
                .then(res => {
                    this.contractList = res.data[0].listData;
                    this.tableTitle=res.data[0].title;
                    this.purchaseList = res.data[0].purchaseList[0];
                    this.contractNumList = res.data[0].contractNumList[0];
                    this.terminationList = this.contractNumList.termination.split(',');
                    this.changeList= this.contractNumList.change.split(',');
                });
        }
    },
    mounted() {
        this.$axios.get(contractExecution.url1)
            .then(res => {
                this.barOption = res.data;
            });
    }
};
</script>
<style scoped lang="scss">
  .card-box {
    
    .tableTitle{
      font-size:14px;
      font-weight:bold;
      color:#333;
      margin:6px 0;
    }
    .info{
      font-size:14px;
      padding:6px 0;
      color:#333;
      padding:15px 4%;
      margin-top:5px;
    }
    .bgZc{
      background:#F8F8F8;
      border-radius:4px;
    }
    .marB{
      margin-bottom:5px;
    }
    .dispalyInline{
      display:inline-block;
      width:50%;
    }
    .part-1 span.specific{
      color:#0066FF;
      font-size:14px;
      display: inline-block;
      margin-left:6px;
    }
    .part-1 span.rate{
      color:#E02020;
      font-size:14px;
      display: inline-block;
      margin-left:10px;
    }
    .infoList{
      font-size:14px;
      margin-top:5px;
    }
    .infoList .contractLink{
      color:#0066FF;
      padding-left:2%; 
    }
  }
  
</style>
